﻿<!--Write a function that makes a deep copy of an object
The function should work for both primitive and reference types
-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Copy</title>
    <link href="styles/js-console.css" rel="stylesheet" />
</head>
<body>
    <div id="js-console"></div>
    
    <script src="scripts/js-console.js"></script>
    <script>
        //var newObject = jQuery.extend(true, {}, oldObject); there is jQueryFunction

        var arr1 = new Array(1, 2, 10, 3); //array is object
        var line1 = { Point1: { X: 0, Y: 3 }, Point2: { X: 5, Y: 0 } };

        var arr2 = deepCopy(arr1);
        jsConsole.writeLine("Original array:")
        printObj(arr1); //print original
        jsConsole.writeLine(new String('-----------------------------------------------'));
        jsConsole.writeLine("Cloned array:")
        printObj(arr2); //print clone
        jsConsole.writeLine(new String('-----------------------------------------------'));

        arr2[2] = 5; //change element to see whether original will stay the same
        jsConsole.writeLine("Original array after change of cloned:")
        printObj(arr1); //print original
        jsConsole.writeLine(new String('-----------------------------------------------'));
        jsConsole.writeLine("Cloned array after change:")
        printObj(arr2); //print clone
        jsConsole.writeLine(new String('-----------------------------------------------'));

        var line2 = deepCopy(line1);
        jsConsole.writeLine("Original line:")
        printObj(line1); //print original
        jsConsole.writeLine(new String('-----------------------------------------------'));
        jsConsole.writeLine("Cloned line:")
        printObj(line2); //print clone
        jsConsole.writeLine(new String('-----------------------------------------------'));

        line2.Point1.X = 66;  //change the value of X coord of clone to see whether the clone is deep
        jsConsole.writeLine("Original line:")
        printObj(line1); //print original
        jsConsole.writeLine(new String('-----------------------------------------------'));
        jsConsole.writeLine("Cloned line after change:")
        printObj(line2); //print clone
        jsConsole.writeLine(new String('-----------------------------------------------'));


        function deepCopy(obj) {
            var newObj = new Object();//new empty object
            for (var key in obj) {
                newObj[key] = obj[key];
                if ((typeof obj[key]) == "object") {
                    newObj[key] = deepCopy(obj[key]);    //recursion if we have to copy object in object call the same function again
                }
            }
            return newObj;
        }


        function printObj(obj) {
            for (key in obj) {
                jsConsole.write("<br/><b>Property </b>" + key + ": " + obj[key]);
                if (typeof (obj[key]) == "object") {
                    printObj(obj[key]);
                }
            }
            jsConsole.writeLine();
        }
    </script>
</body>
</html>